<script setup>
import {
    CirclePlusFilled
} from '@element-plus/icons-vue'
import { deleteBanner, getBannerList } from '@/apis/content';
import { onMounted, ref } from 'vue';
import BannerDialog from './components/BannerDialog.vue'
import { ElMessage, ElMessageBox } from 'element-plus';

const tableData = ref([])
const dialog = ref()
const bannerList = async () => {
    const res = await getBannerList()
    tableData.value = res.data
    console.log(tableData.value);
}
onMounted(() => {
    bannerList()
})

// 添加
const onAdd = () => {
    dialog.value.open({})
}
// 修改
const onEdit = (row) => {
    dialog.value.open(row)
}
// 删除
const onDel = async (row) => {
    ElMessageBox.confirm('此操作将永久删除该轮播图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning'
    }).then(async () => {
        await deleteBanner(row.id)
        bannerList()
        ElMessageBox.close()
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.error('取消删除')
    })
}
// 重新调用渲染页面
const onSuccess = () => {
    bannerList()
}
</script>

<template>
    <div class="header">
        <h2>轮播图管理</h2>
        <el-button type="primary" :icon="CirclePlusFilled" @click="onAdd">添加</el-button>
    </div>
    <div class="table">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="content" label="描述" width="240" />
            <el-table-column label="图片" width="240">
                <template #default="scope">
                    <img :src="scope.row.imgUrl" alt="" style="width: 215px; height: 125px;">
                </template>
            </el-table-column>
            <el-table-column prop="hrefUrl" label="跳转路径" width="210" />
            <el-table-column prop="createTime" label="创建时间" width="210" />
            <el-table-column prop="updateTime" label="修改时间" width="210" />
            <el-table-column label="操作" width="">
                <template #default="{ row, $index }">
                    <el-button type="primary" @click="onEdit(row)">修改</el-button>
                    <el-button type="danger" @click="onDel(row, $index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <BannerDialog ref="dialog" @success="onSuccess"></BannerDialog>
</template>
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
</style>